<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="brull@163.com,brull" />
    <script type="text/javascript"> 
/** 
*JWindow，Jchat窗口类 
*version 1.0 
*@author brull 
*@email brull@163.com 
*@date 2007-01-31 
*/ 
/* 
 *新建一个窗口视图，并显示在浏览器容器里 
 *类里有实例方法，min、changeStatus、close、drag 
 */ 
 
JWindow = function (win_obj) 
{ 
    /* 
    窗口存在判断 
    如果窗口存在则只是显示它，并将它置为当前窗口 
    */ 
    if(document.getElementById(win_obj.id)){//窗口已存在 
        var existWin = document.getElementById(win_obj.id).quote;//存在窗口的引用 
        if (JWindow.curWindow != win_obj.id){//窗口不是当前窗口 
            if (existWin.contain.style.display == "none"){//窗口是隐藏的(MIN,CLOSE),窗口隐藏时标题活动样式不变 
                existWin.status = existWin.oldStatus;//还原原来状态 
                existWin.contain.style.display = "";//显示窗口 
                JWindow.curWindow = win_obj.id;//设置为当前窗口 
                me.previous = JWindow.curWindow; 
            } 
            else { 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";//设置当前窗口为非活动窗口样式 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive";//设置任务栏按钮为非活动按钮样式 
                JWindow.curWindow = win_obj.id;//设置为当前窗口 
                document.getElementById(win_obj.id + "_caption").className = "win_caption_active";//设置窗口为活动窗口样式 
                document.getElementById(win_obj.id + "_task").className = "task_button_active";//设置任务栏按钮为活动按钮样式 
            } 
            existWin.contain.zIndex = JWindow.zIndex++;//窗口上移到层最顶端 
        } 
        return; 
    } 
    /**********创建窗口******************/ 
    var win = win_obj;//包含窗口属性的原生对象 
    var isIe = /msie/i.test(navigator.userAgent);//是否是IE浏览器 
    this.contain = document.createElement("div");//窗口容器 
    this.id= win.id;//win_obj没有默认值，初始化时win_obj必须有id属性 
    this.width = win.width?win.width:420;//窗口宽，默认为420 
    this.height = win.height?win.height:360;//窗口关，默认为360 
    this.left = win.left?win.left:(document.documentElement.clientWidth-this.width)/2;//窗口左上角距离浏览器左边框距离，默认居中 
    this.top = win.top?win.top:(document.documentElement.clientHeight-this.height)/2;//窗口左上角距离浏览器上边框距离，默认居中 
    this.oldLeft = this.left;//记录窗口最大化时窗口左上角距离浏览器左边框距离 
    this.oldTop = this.top;//记录窗口最大化时窗口左上角距离浏览器顶边框距离 
    this.title = win.title?win.title:" ";//标题，默认为空 
    this.content = win.content ? win.content : "";//窗口内容，默认为空 
    this.icon = win.icon ? win.icon : "http://www.51js.com/attachments/2007/03/35270_200703102258421.gif";//窗口图标 
    this.minButton = (win.minButton == false) ? false:true;//是否显示最小化按钮，默认显示 
    this.maxButton = (win.maxButton == false) ? false:true;//是否显示最大化按钮，默认显示 
    this.closeButton = (win.closeButton==false) ? false:true;//是否显示关闭按钮，默认显示 
    this.status = "NORMAL";//窗口状态，包括MAX,MIN,NORMAL,CLOSE 
    this.previous = JWindow.curWindow ? JWindow.curWindow : null;//上个当前窗口，在窗口关闭和最小化时有用 
    win = null;//释放对象 
    var me = this;//对象引用，方便类内部引用 
    /*************生成窗口视图******************/ 
    me.contain.id = this.id; 
    me.contain.quote = this;//对象引用，方便应用页面引用 
    me.contain.className="win_contain"; 
    
    with(me.contain.style){ 
        position = "absolute"; 
        left = this.left + "px"; 
        top = this.top + "px"; 
        width =this.width + "px"; 
        height =this.height + "px"; 
        zIndex = JWindow.zIndex++; 
    } 
    me.contain.innerHTML = "<div class=\"win_caption_active\" id=\"" + this.id + "_caption\"" + " ondblclick=\"document.getElementById('" + this.id + "').quote.changeStatus('" + this.id + "')\"><img src=\"" + this.icon + "\" class=\"win_icon\" /><span class=\"win_title\">" + this.title + "</span><div class=\"win_button_div\">"+(this.minButton ? "<input class=\"win_min\" type=\"button\" title=\"最小化\" onclick=\"document.getElementById('" + this.id + "').quote.min();\" />":"")+(this.maxButton ? "<input class=\"win_max\" id=\"" + this.id + "_maxbutton\" type=\"button\" onmouseover=\"this.title=(document.getElementById('" + this.id + "').quote.status=='MAX')?'还原':'最大化'\" onclick=\"this.blur();document.getElementById('" + this.id + "').quote.changeStatus();\" />":"")+(this.closeButton ? "<input class=\"win_close\" type=\"button\" title=\"关闭\" onclick=\"document.getElementById(\'" + this.id + "\').quote.close();\"/>":"")+ "</div></div><div class=\"win_body\" id=\"" + this.id + "_body" + "\">" + this.content + "</div>"; 
    /***************注册窗口事件************************/ 
    me.contain.onmousedown = function (e) 
    { 
        e = e || window.event;
        var srcElement = isIe ? e.srcElement : e.target; 
        if(JWindow.curWindow != me.id){ 
            me.contain.style.zIndex = JWindow.zIndex++; 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.previous = JWindow.curWindow; 
            JWindow.curWindow = me.id;//设置为当前窗口 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
        } 
        if (me.id + "_caption" ==srcElement.id   &&   me.status == "NORMAL") me.drag(e); 
    } 
    /***********添加任务栏按钮**********/ 
    var task = document.createElement("button"); 
    task.id = me.id + "_task"; 
    task.title = me.title; 
    task.className = "task_button_active"; 
    task.innerHTML = "<img src=\"" + me.icon + "\" class=\"task_icon\" /><span class=\"task_font\">" + me.title + "</span>"; 
    task.onclick = function () { 
           task.blur();//丢掉讨厌的虚线框 
        if(JWindow.curWindow != me.id){ 
            me.contain.style.zIndex = JWindow.zIndex++; 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.previous = JWindow.curWindow; 
            JWindow.curWindow = me.id;//设置为当前窗口 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            if(me.status == "MIN"){ 
                me.status = me.oldStatus;//还原原来状态 
                //document.getElementById(me.id + "_task").className = "task_button_active"; 
                me.contain.style.display = "";//显示窗口 
            } 
        } 
        else if(me.status == "MAX" || me.status == "NORMAL") me.min(); 
        else if(me.status == "MIN") { 
            me.status = me.oldStatus;//还原原来状态 
            document.getElementById(me.id + "_task").className = "task_button_active"; 
            me.contain.style.display = "";//显示窗口 
        } 
    } 
    if(! document.getElementById("task")) JWindow.createTask(); 
    document.getElementById("task").appendChild(task); 
    document.body.appendChild(me.contain);//将窗口放入浏览器容器 
    if (document.getElementById(JWindow.curWindow) != null){ //当前窗口不为空 
        document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";//设置当前窗口为不活动状态 
        document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
    } 
    /***********设置为当前窗口*************/ 
    JWindow.curWindow = me.id; 
    /***********对象方法*************/ 
    this.drag = function (e) 
    { 
        var w = me.contain; 
        var relLeft = e.clientX-parseInt(w.style.left); 
        var relTop = e.clientY-parseInt(w.style.top); 
        //每次拖动都注册事件，然后再注销 
        document.onmousemove = function (e) 
        { 
            e = e || event; 
            if(w !=null){ 
                w.style.left = (e.clientX-relLeft) + "px"; 
                w.style.top =  (e.clientY-relTop) + "px"; 
            } 
        } 
        document.onselectstart = function () 
        { 
            return false; 
        } 
        document.onmouseup = function () 
        { 
            w = null;//释放拖动对象 
            document.onmouseup = document.onmousemove = document.onselectstart = null;//注销注册事件，包括该事件本身 
        } 
    } 
this.min = function () 
    { 
        if(JWindow.curWindow == me.id   &&   this.minButton){ 
            me.contain.style.display = "none";//只是隐藏而已^_^ 
            me.oldStatus = me.status;//保存最小化前的状态 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.status = "MIN"; 
            if(me.previous   &&   document.getElementById(me.previous).quote.contain.style.display != "none"){ 
                JWindow.curWindow = me.previous;//设置为当前窗口 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            } 
        } 
    } 
    this.changeStatus = function () 
    { 
        if (me.status == "MIN"||me.status == "CLOSE") return ; 
        if (me.status == "MAX"   &&   this.maxButton) 
        { 
            with(me.contain.style){ 
                left = me.oldLeft + "px"; 
                top = me.oldTop + "px"; 
                width = me.width + "px"; 
                height = me.height + "px"; 
            } 
            document.getElementById(me.id + "_maxbutton").className="win_max"; 
            me.status = "NORMAL"; 
        } 
        else if(me.status =="NORMAL"   &&   this.maxButton) 
        { 
            //记录窗口位置，方便窗口还原大小时定位 
            me.oldLeft = parseInt(me.contain.style.left); 
            me.oldTop = parseInt(me.contain.style.top); 
            with(me.contain.style){ 
                left = 0; 
                top = 0; 
                width = document.documentElement.clientWidth + "px";//only for XHTML 
                height = (document.documentElement.clientHeight-document.getElementById("task").offsetHeight) + "px";//only for XHTML 
            } 
            document.getElementById(me.id + "_maxbutton").className="win_res"; 
            me.status = "MAX"; 
        } 
    } 
    //窗口关闭 
    this.close = function () 
    { 
        if(JWindow.curWindow == me.id   &&   this.closeButton){ 
            document.getElementById(JWindow.curWindow + "_task").style.display = "none"; 
            me.contain.style.display = "none";//只是隐藏而已^_^ 
            me.oldStatus = me.status;//保存关闭前的状态 
            me.status = "CLOSE"; 
            if(me.previous   &&   document.getElementById(me.previous).quote.contain.style.display != "none"){ 
                JWindow.curWindow = me.previous;//设置为当前窗口 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            } 
        } 
    } 
} 
/***************静态属性和方法***********/ 
//静态属性 
JWindow.zIndex = 100;//初始zIndex,任务栏的zIndex为30000，每点击一次窗口窗口zIndex自增1，也就是用户最多可以点击窗口29900次，应该已经足够 
JWindow.curWindow = null;//当前活动窗口 
/*********静态方法**********/ 
//创建任务栏 
JWindow.createTask = function() { 
    var task = document.createElement("div"); 
    task.id = "task"; 
    with (task.style) { 
        position = "absolute"; 
        height = "20px"; 
        width = document.documentElement.clientWidth + "px"; 
        left = 0; 
        bottom = 0; 
        padding = "1px"; 
        border = "1px solid #EEE"; 
        background = "#CCC"; 
        zIndex = 30000;//设置一个比较大数，使其永远位于最上层 
    } 
    document.body.appendChild(task); 
} 
/*非本类方法，但是在这里编写可读性比较高 
 *注册系统事件 
 */ 
/***********注册事件,在浏览器窗口大小调整时对任务栏的位置和宽度进行相应调整*********/ 
window.onresize = function () { 
    with(document.getElementById("task").style){ 
        width = document.documentElement.clientWidth + "px"; 
        top = (document.documentElement.clientHeight-parseInt(height)) + "px"; 
    } 
} 
    </script>
    <title>web online communication</title>
    <style type="text/css"> 
/*Jchat 客户端默认样式表*/ 
 html,body 
{ 
    height:100%; 
    width:100%; 
    overflow:hidden; 
    border-width:0; 
    background-color:#336699; 
    margin:0; 
    padding:0; 
} 
/*窗口容器*/ 
.win_contain 
{ 
    border-width:2px; 
    border-style:outset; 
    border-color:#D4D0C8 #404040 #404040 #D4D0C8; 
    cursor:default; 
    background-color:#CCC; 
} 
/*活动窗口标题样式*/ 
.win_caption_active 
{ 
    width:100%; 
    height:18px; 
    font-size:14px; 
    background-color:#69C; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#10246B,endColorStr=#a5cbf7,GradientType=1); 
} 
/*非活动窗口标题样式*/ 
.win_caption_deactive 
{ 
    width:100%; 
    height:18px; 
    background-color:#808080; 
    font-size:14px; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#848284,endcolorstr=#c6c3c6,GradientType=1); 
} 
/*窗口窗体样式*/ 
.win_body 
{ 
    width:99%; 
    height:340px; 
    padding:2px; 
    overflow:hidden; 
} 
/*窗口图标样式*/ 
.win_icon 
{ 
    padding:1px; 
    vertical-align:text-bottom; 
} 
/*窗口标题样式*/ 
.win_title 
{ 
    color:#FFF; 
    /*font-size:14px;*/ 
    font-weight:bold; 
} 
/*窗口按钮层样式*/ 
.win_button_div 
{ 
    display:inline; 
    position:absolute; 
    right:0; 
    padding:2px; 
} 
/*窗口按钮样式*/ 
.win_button_div input 
{ 
    width:16px; 
    height:14px; 
    background-color:#CCC; 
} 
/*活动任务栏按钮*/ 
.task_button_active 
{ 
    border:2px inset; 
    width:100px; 
    height:20px; 
    text-align:left; 
    margin-left:3px; 
    padding:0px; 
    overflow:hidden; 
    background-color:#CCC; 
} 
/*非活动任务栏按钮*/ 
.task_button_deactive 
{ 
    width:100px; 
    height:20px; 
    text-align:left; 
    margin-left:3px; 
    overflow:hidden; 
    padding:0px; 
    background-color:#CCC; 
} 
/*任务栏按钮文字*/ 
.task_font 
{ 
    font-size:12px; 
} 
/*任务栏按钮图标*/ 
.task_icon 
{ 
    vertical-align:bottom; 
} 
/*聊天内容窗口*/ 
.chat_frame 
{ 
    width:100%; 
    height:240px; 
    background-color:#FFF; 
    word-break:break-all; 
} 
.editor_frame 
{ 
    width:100%; 
    height:100px; 
    background-color:#FFF; 
    word-break:break-all; 
} 
/*窗口最小化按钮样式*/ 
.win_min 
{ 
    background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102256511.gif) no-repeat  center center; 
} 
/*窗口还原按钮样式*/ 
.win_res 
{ 
    background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102257161.gif) no-repeat  center center; 
} 
/*窗口最大化按钮样式*/ 
.win_max 
{ 
    background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102256581.gif) no-repeat center center; 
} 
/*窗口关闭按钮样式*/ 
.win_close 
{ 
    background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102257331.gif) no-repeat  center center; 
} 
</style>
</head>
<body>
    <script type="text/javascript"> 
    /*******用户程序*********/ 
    var content ="调用方法：<br />构造win对象，然后将win对象作为参数实例化JWindow类。具体如源代码下面的例子。<br />其中win对象的属性如下：<br />id:窗口id，用户必须提供值，并确保是唯一的<br />title:窗口标题，默认为空<br />content:窗体内显示的内容，可以是任何浏览器认得的东西，默认为空<br /> icon:窗口图标，如果用户没有提供值，类会提供个默认值<br />top:窗口左上角距离浏览器上边框距离，默认居中<br />left:窗口左上角距离浏览器左边框距离，默认居中<br />width:窗口宽，默认为420<br />height:窗口关，默认为360<br />minButton:(布尔值)是否显示最小化按钮，默认显示<br />maxButton:(布尔值)是否显示最大化按钮，默认显示<br />closeButton:(布尔值)是否显示关闭按钮，默认显示"; 
    var win1={ 
        title:"测试", 
        id:"1", 
        content:content 
    }; 
    var win2={ 
        id:"2", 
        content:content, 
        maxButton:false 
    }; 
    var win3=new Object(); 
        win3.title="测试"; 
        win3.id="3";        win3.content=content; 
        win3.icon="http://www.51js.com/attachments/2007/03/35270_200703102258421.gif"; 
    new JWindow(win1); 
    new JWindow(win2); 
    new JWindow(win3); 
    </script>
    <!--information-->
    <div style="position: absolute; bottom: 30px; right: 5px; word-break: break-all;
        font-size: 12px; color: #CCC;">
        兼容浏览器：IE5.5+、FireFox1.5+<br />
        推荐浏览器：IE6.0、FireFox2.0<br />
        design by brull. All right reserved ?2007
        <br />
        Email:brull@163.com
    </div>
</body>
</html>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问代码学院网页脚本特效集</a>

更多代码请访问：<a href="http://www.codexy.com" target="_blank">代码学苑</a>